<template>
    <div>
      <div class="banner"></div>
      <div class="core">
        <ul class="list-nav">
          <router-link to="core-dev"
            ><li :class="now == '/core/core-dev' ? 'active' : ''">
             生产研发
            </li></router-link
          >
          <router-link to="core-technology"
            ><li :class="now == '/core/core-technology' ? 'active' : ''">
             技术支撑 <Icon type="ios-arrow-dropright" class="icon" /></li
          ></router-link>
        
        </ul>
        <div class="list-content">
          <router-view />
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        now: "",
      };
    },
    mounted() {
      this.now = this.$route.path;
      
    },
    // 内容更新时候左侧导航栏激活状态于当前路由地址一样
    updated() {
      this.now = this.$route.path;
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .banner {
    width: var(--width);
    height: 30vh;
    background-image: url("http://www.jl-oled.com/Uploads/Picture/2019-03-27/5c9aef031fef4.jpg");
    background-position: center;
    background-size: cover;
  }
  .core {
    margin: 20px auto;
    width: var(--wrap);
    display: flex;
    justify-content: space-between;
    .list-nav {
      li {
        position: relative;
        margin-bottom: 5px;
        padding-left: 10px;
        width: 250px;
        height: 50px;
        line-height: 50px;
        background-color: #eee;
        color: #333;
        font-size: 16px;
        user-select: none;
        &:hover {
          color: #eee;
          background-image: url("http://www.jl-oled.com/Public/Home/images/012.jpg");
        }
        &.active {
          color: #eee;
          background-image: url("http://www.jl-oled.com/Public/Home/images/012.jpg");
        }
        .icon {
          position: absolute;
          right: 20px;
          top: 16px;
        }
      }
    }
    .list-content {
      width: calc(var(--wrap) - 20px - 250px);
      
    }
  }
  </style>
  
  